<template>
	<div>
		<div class="article-content">
			<h1 class="article-title">{{ articleContent.title }}</h1>
			<div class="article-info">
				<div class="art-footer">
					<time class="bot">
						<Icon type="ios-calendar-outline" />
						{{ articleContent.createTime | dateformatDate }}
					</time>
					<span class="sp">/</span>
					<span class="bot">
						<Icon type="ios-eye-outline" style="font-size: 24px;vertical-align:-.185em" />
						{{ articleContent.readNum }}
					</span>
					<span class="sp">/</span>
					<span class="bot">
						<Icon type="ios-chatbubbles-outline" />
						{{ articleContent.commentSum }}
					</span>
					<Tag fade v-for="(tag, tagIndex) in articleContent.articleTagPojoList" :key="tagIndex" :color="tag.color">{{ tag.name }}</Tag>
				</div>
			</div>

			<div class="desc-img" v-if="articleContent.cover" :style="{ backgroundImage: 'url(' + articleContent.cover + ')' }"></div>
			<div class="desc-info">
				<p>{{ articleContent.description }}</p>
			</div>
			<div class="article-body">
				<p v-html="articleContent.contentFormat"></p>
				<p class="end">———————the end———————</p>
			</div>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>
		<YRComment :articleId="Number($route.query.id)"></YRComment>
	</div>
</template>

<script>
import YRComment from '@/components/common/YRComment.vue';
import { getArticle } from '@/api/article';
export default {
	name: 'NovelContent',
	components: {
		YRComment
	},
	data: () => {
		return {
			articleContent: {},
			spinShow: false
		};
	},
	props: {},
	methods: {
		getArticleById() {
			this.spinShow = true;
			getArticle(this.$route.query.id).then(res => {
				this.articleContent = res.data;
				this.spinShow = false;
			});
		}
	},
	computed: {},
	created() {
		this.getArticleById();
	},
	watch: {
		$route() {
			// 对路由变化作出响应...
			// 解决相同组件间跳转 组件被复用 周期函数失效
			this.getArticleById();
		}
	}
};
</script>

<style scoped="scoped" lang="stylus">
.ql-container.ql-snow
	border 0
.article-content
	background-color #fff
	min-height 20vh
	padding 20px 20px
	border-radius 10px
	position relative
	overflow hidden
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	.article-title
		font-size 30px
		color #444
		margin-bottom 10px
		line-height 42px
		font-weight 400
		text-transform none
		vertical-align baseline
		display inline
		transition background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)
		background-size 100% 150%
	.article-title:hover
		background-size 100% 100%
		background-image linear-gradient(to top, transparent, transparent 0, #fd0 0, #fd0 7px, transparent 7px)
	.article-info
		color rgba(0, 0, 0, 0.5)
		font-size 13px
		margin-bottom 10px
		.art-footer
			width 100%
			height 35px
			display flex
			align-items center
			.sp
				padding-right 10px
			.bot
				line-height 35px
				color #8f8f8f
				font-size 14px
				padding-right 10px
				cursor pointer
				.ivu-icon
					font-size 1.25rem
			.tag
				margin 0 10px
	.desc-img
		height 220px
		width 100%
		background-size cover
		background-position center
		background-repeat no-repeat
		margin 20px 0
	.desc-info
		background #9CCC65
		padding 25px
		margin-bottom 20px
		color #fff
		opacity 0.8
		border-radius 10px
	.article-body
		font-size 12px
		line-height 1.8em
		color rgba(0, 0, 0, 0.8)
		margin-bottom 20px
		letter-spacing 1px
		.end
			text-align center
			padding-top 80px
.ivu-tag
	height 18px
	line-height 18px
</style>
